<template>
  <basic-container>
    <basic-header title="商品支付排行" />
    <filter-table :option="filterOption" @handle-filter="handleFilter" />
    <el-row>
      <el-col :span="12">
        <el-card shadow="always" class="goods-card">
          <div slot="header" class="card-header">
            <h3>租供商品</h3>
          </div>
          <div class="goods-item" v-for="(name, idx) in leasRank" :key="'lease-' + idx">
            <span>第{{idx | toZh}}名：</span>
            <span :class="name ? 'goods-title' : 'goods-none'">{{name || '暂无信息'}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always" class="goods-card">
          <div slot="header" class="card-header">
            <h3>非租供商品</h3>
          </div>
          <div class="goods-item" v-for="(name, idx) in unleasRank" :key="'lease-' + idx">
            <span>第{{idx | toZh}}名：</span>
            <span :class="name ? 'goods-title' : 'goods-none'">{{name || '暂无信息'}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </basic-container>
</template>
<script>
import FilterTable from "@/components/FilterTable";
import actionTypes from "@/const/action";
import filterOption from "@/const/filters";
import { SyncGetStatisticsData } from "@/api/data";

const action = actionTypes.STATISTICS_GOODS;
const option = filterOption[action];

const NUMBER_TO_ZH = {
  0: "一",
  1: "二",
  2: "三",
  3: "四",
  4: "五"
};

export default {
  name: "maintain",
  components: { FilterTable },
  filters: {
    toZh(value) {
      return NUMBER_TO_ZH[value] || value;
    }
  },
  data() {
    return {
      filterOption: option,
      filterData: {},
      leasRank: new Array(5),
      unleasRank: new Array(5),
      action: actionTypes.STATISTICS_GOODS
    };
  },
  created() {
    this.getStatisticsData();
  },
  methods: {
    handleFilter(data) {
      this.filterData = data;
      this.getStatisticsData();
    },
    async getStatisticsData() {
      const { data, error } = await SyncGetStatisticsData(
        this.action,
        this.filterData
      );

      if (error) {
        this.$message({
          type: "error",
          message: error.message || String(error)
        });
        return;
      }

      this.initDisplayData(data.bussData);
    },
    initDisplayData(data) {
      let leasRank = new Array(5);
      let unleasRank = new Array(5);

      data.LEASE.sort((a, b) => a.num - b.num).forEach((item, index) => {
        if (index < 5) {
          leasRank[index] = item.productName;
        }
      });
      data.NOT_LEASE.sort((a, b) => a.num - b.num).forEach((item, index) => {
        if (index < 5) {
          unleasRank[index] = item.productName;
        }
      });
      this.leasRank = leasRank;
      this.unleasRank = unleasRank;
    }
  }
};
</script>
<style lang="scss" scoped>
@mixin chooseColor($idx) {
  @if $idx == 1 {
    color: rgb(255, 168, 32);
  }
  @if $idx == 2 {
    color: #409eff;
  }
  @if $idx == 3 {
    color: #00a680;
  }
}
.goods {
  &-card {
    padding: 34px;
    box-sizing: border-box;
  }
  &-item {
    line-height: 34px;
  }
  &-rank {
    color: #999;
  }
  &-none {
    color: #ccc;
  }
}
@for $i from 1 through 3 {
  .goods-item:nth-child(#{$i}) .goods-title {
    @include chooseColor($i);
  }
}
</style>


